<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Reflection from a Moving Mirror</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="450" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;

    // Helper function to draw a line with an arrow at the end
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function to draw a vector arrow symbol over a label
    function drawLabelArrow(ctx, x, y, length) {
        ctx.save();
        ctx.lineWidth = 1;
        drawArrow(ctx, x, y, x + length, y);
        ctx.restore();
    }

    // Parameters for the drawing
    const cx = 300;
    const cy = 240;
    const rayLength = 160;
    const theta_i_deg = 30;
    const theta_r_deg = 38; // Drawn slightly larger than theta_i, as implied by a moving mirror
    const theta_i = theta_i_deg * Math.PI / 180;
    const theta_r = theta_r_deg * Math.PI / 180;
    const axisOriginX = 80;
    const axisOriginY = 220;
    const axisLength = 120;
    const arcRadius = 50;
    
    // --- Start Drawing ---

    // 1. Coordinate System
    ctx.font = 'italic bold 20px serif';
    // y-axis
    drawArrow(ctx, axisOriginX, axisOriginY + 70, axisOriginX, axisOriginY - 70);
    ctx.fillText('y', axisOriginX - 25, axisOriginY - 75);
    // x-axis
    drawArrow(ctx, axisOriginX - 10, axisOriginY, axisOriginX + axisLength, axisOriginY);
    ctx.fillText('x', axisOriginX + axisLength + 5, axisOriginY + 8);
    // Frame of reference symbol 'Σ'
    ctx.font = 'bold 24px serif';
    ctx.fillText('Σ', axisOriginX - 40, axisOriginY + 15);
    
    // 2. Mirror
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.moveTo(cx, cy - 140);
    ctx.lineTo(cx, cy + 140);
    ctx.stroke();
    // Hatching lines on the right side of the mirror
    ctx.lineWidth = 1;
    for (let i = -135; i <= 135; i += 15) {
        ctx.beginPath();
        ctx.moveTo(cx, cy + i);
        ctx.lineTo(cx + 10, cy + i - 10);
        ctx.stroke();
    }
    ctx.lineWidth = 1.5;

    // 3. Normal Line (dashed) and Mirror Velocity
    // Dashed line for the normal
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    const normalEndX = cx + 100;
    ctx.moveTo(cx - rayLength * 0.8, cy);
    ctx.lineTo(normalEndX, cy);
    ctx.stroke();
    ctx.restore();
    // Velocity arrow for the mirror, starting from the end of the dashed line
    drawArrow(ctx, normalEndX, cy, normalEndX + 20, cy);
    ctx.font = 'italic bold 20px serif';
    ctx.fillText('v', normalEndX + 25, cy + 8);

    // 4. Incident Ray
    const start_ix = cx - rayLength * Math.cos(theta_i);
    const start_iy = cy + rayLength * Math.sin(theta_i);
    drawArrow(ctx, start_ix, start_iy, cx, cy);

    // 5. Reflected Ray
    const end_rx = cx - rayLength * Math.cos(theta_r);
    const end_ry = cy - rayLength * Math.sin(theta_r);
    drawArrow(ctx, cx, cy, end_rx, end_ry);

    // 6. Angle Arcs
    ctx.save();
    ctx.lineWidth = 1;
    // Angle of incidence, θi
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, Math.PI, Math.PI + theta_i);
    ctx.stroke();
    // Angle of reflection, θr
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, Math.PI - theta_r, Math.PI);
    ctx.stroke();
    ctx.restore();
    
    // 7. Labels
    ctx.font = 'italic bold 20px serif';
    const subfont = 'italic bold 14px serif';
    
    // Wave vector ki
    const ki_label_x = (start_ix + cx) / 2 - 20;
    const ki_label_y = (start_iy + cy) / 2 + 20;
    ctx.fillText('k', ki_label_x, ki_label_y);
    drawLabelArrow(ctx, ki_label_x - 2, ki_label_y - 23, 15);
    ctx.font = subfont;
    ctx.fillText('i', ki_label_x + 9, ki_label_y + 6);
    ctx.font = 'italic bold 20px serif';
    
    // Wave vector kr
    const kr_label_x = (end_rx + cx) / 2 - 20;
    const kr_label_y = (end_ry + cy) / 2 - 5;
    ctx.fillText('k', kr_label_x, kr_label_y);
    drawLabelArrow(ctx, kr_label_x - 2, kr_label_y - 23, 15);
    ctx.font = subfont;
    ctx.fillText('r', kr_label_x + 9, kr_label_y + 6);
    ctx.font = 'italic bold 20px serif';
    
    // Angle θi
    const thetai_x = cx - (arcRadius - 15) * Math.cos(theta_i / 2);
    const thetai_y = cy + (arcRadius - 15) * Math.sin(theta_i / 2);
    ctx.fillText('θ', thetai_x - 5, thetai_y + 8);
    ctx.font = subfont;
    ctx.fillText('i', thetai_x + 5, thetai_y + 12);
    ctx.font = 'italic bold 20px serif';

    // Angle θr
    const thetar_x = cx - (arcRadius - 15) * Math.cos(theta_r / 2);
    const thetar_y = cy - (arcRadius - 15) * Math.sin(theta_r / 2);
    ctx.fillText('θ', thetar_x - 5, thetar_y + 3);
    ctx.font = subfont;
    ctx.fillText('r', thetar_x + 5, thetar_y + 7);
    ctx.font = 'italic bold 20px serif';

    // Labels for incident and reflected frequency, labeled as 'v' and 'v'' in the source image
    ctx.fillText("v", 460, 340);
    ctx.fillText("v'", 460, 110);
    
    // 8. Figure Caption
    ctx.font = '18px serif';
    ctx.fillText('Fig. 3.10.', 240, 430);

</script>
</body>
</html>